<template>
  <div>
    <header-view/>
    <div id="page-content" class="single-page">
      <div class="container" style="border-radius: 10px;background-color: white">
        <div class="row" style="margin-top: 10px">
          <div id="main-content" class="col-md-12" style="border-radius: 10px;">
            <div class="row">
              <div class="col-md-12 col-sm-12">
                <div class="wrap-vid flex-column">
                  <div class="box">
                    <d-player  ref="player" v-if="renderPlayerFlag" @play="play"
                              :video="video"
                              :autoplay="dplayerProps.autoplay"
                              :lang="dplayerProps.lang"
                              :theme="dplayerProps.theme"
                              :apiBackend="dplayerProps.apiBackend"
                              :contextmenu="contextmenu"></d-player>
                  </div>
                </div>
                <div class="line"></div>
                <h1 class="vid-name">
                  <a href="#">{{video.title}}</a>
                </h1>
<!--                <div class="info">-->
<!--                  <br>-->
<!--                  <h5> 直播人: <a href="#">{{ video.anchorName }}</a></h5>-->
<!--                  <h5>直播时间:&nbsp; <i class="fa fa-calendar"></i>{{ $moment(video.liveTime).format('YYYY-MM-DD')-->
<!--                    }}</h5>-->
<!--                  &lt;!&ndash;<span><i class="fa fa-heart"></i>1,200</span>&ndash;&gt;-->
<!--                </div>-->
<!--                <br>-->
<!--                <h4>直播简介</h4>-->
<!--                <p style="margin-top: 20px"> {{ video.liveInfo }}</p>-->
              </div>
            </div>
<!--            <div class="line"></div>-->
          </div>
        </div>
      </div>
    </div>
    <footer-view/>
  </div>

</template>

<script>
  import headerView from '@/components/Header/index'
  import footerView from '@/components/Footer/index'
  import {videoAPI} from '../api/index'
  import {Notification} from 'element-ui'
  import urlUtil from '../assets/util/urlUtil'
  import VueDPlayer from './vueDplayerHls'
  import axo from 'axios'
  // import returnCitySN from 'returnCitySN' // 新浪 获取设备IP
  export default {
    name: 'backVideoDetail',
    data () {
      return {
        loginUser: {
          uid: this.$root.uid,
          username: this.$root.username,
          email: this.$root.email,
        },
        msg: 'Welcome to Your Vue.js App',
        video: {
          liveNo: this.$route.query.liveNo == null ? urlUtil.getUrlKey('liveNo') : this.$route.query.liveNo,
          quality: [
            {
              name: '高清',
              url: 'api/live/cctv1_2/index.m3u8',//this.video.quality[0].url,
              type: 'hls',//this.video.quality[0].type,
            },
            {
              name: '清晰',
              url: 'api/live/cctv1_2/index.m3u8', //this.video.quality[1].url,
              type: 'hls',//this.video.quality[1].type,
            },
          ],
          danmaku: true,
          live: false,
          defaultQuality: 0,
          pic: 'https://www.baidu.com/img/pcpad_e247c0f9a461b6394da20e308588818f.png', // 首次显示的图片

        },
        dplayerProps: {
          autoplay: true,
          theme: '#b7daff',
          lang: 'zh-cn',
          apiBackend: {
            read: function (endpoint, callback) { // 这里和官方说的有点出入，因为这里是vue版本，可能不太一样，通过debug发现，只能这样去实现弹幕
              try {
                endpoint.success()
              } catch (e) {
              } // 消除弹幕加载中一直会提示问题，手动执行加载成功
            },
            send: function (endpoint, danmakuData, callback) { // danmakuData 竟然是undefined
              window.$$$video.sendChat(endpoint.data.text)
            },
          },
        },
        player: null,
        contextmenu: [
          {
            text: '美菜拥有您想不到的惊喜',
            link: 'https://www.meicai.cn/#/'
          }
        ],
        renderPlayerFlag: false,
        videoFormData: {
          newLasted: [], // 最新视频
          carousel: [] // 轮播视频即即热门视频
        },
        videoTypeList: [
          {label: '未开播'}, {label: '正在播放'}, {label: '直播结束'}
        ],
        ip: '' // 用户公网IP
      }
    },
    components: {
      headerView,
      footerView,
      'd-player': VueDPlayer
    },
    created () {

    },
    mounted () {
      let _self = this
      // 加载文件详情
      _self.initVideoDetail()
        .then((res) => {
          if (_self.video.liveServer) {
            if (_self.video.liveServer != null) { // 只有正在直播正的才需要连接netty服务器
            }
          }
          //danmu(_self)
          _self.initOtherVideo()
          // 加载聊天数据
          _self.initChatData(_self.activeChatType)
        }, (err) => {
          Notification.warning({
            title: '友情提示',
            message: err
          })
        })
    },
    methods: {
      play () {
        console.log('开始播放')
      },
      initVideoDetail () { // 初始化视频详情
        let _self = this
        return new Promise((resolve, reject) => {
          if (_self.video.liveNo == null) {
            Notification.error({
              title: '友情提示',
              message: '直播编号为空,无法正常加载视频！'
            })
            return
          }
          axo.get(process.env.REST_IP).then((res => {
            var params = {
              liveNo: _self.video.liveNo,
              uid: _self.loginUser.uid,
              username: _self.loginUser.username,
              ip: res.data.body, // 用户公网IP
            }
            videoAPI.getVideoDetail(params, (res) => {
              if (res) {
                if (res.isShelves == 0) {
                  reject('当前视频已下架！')
                  return
                }
                if (res.isDeleted == 1) {
                  reject('当前视频已被删除！')
                  return
                }
                _self.video = res
                _self.videoLiveServerSpare = _self.video.liveServer
                if (res.liveStatus == 0){
                  _self.$message.info('当前直播未开始')
                  return
                  _self.video.liveServer = _self.videoLiveServerDefault
                } else if (res.liveStatus == 2) {
                }
                if (res.videoHlsDetailList && res.videoHlsDetailList.length == 0) {
                  reject('当前视频没有配置HLS流,请联系管理员！')
                  return
                }
                _self.renderPlayer(res, _self)
                resolve('成功')
              } else {
                reject('当前视频不存在,可能视频配置错误,请联系平台管理员！')
              }
            })
          })).catch((e)=>{
            reject(e)
          })
        })
      },
      renderPlayer (res, _self) {
        var qualityArr = []
        res.videoHlsDetailList.forEach((ele, index) => {
          qualityArr.push({
            url: ele.liveHlsAddress,
            name: ele.liveHlsType,
            type: (ele.type != undefined ? ele.type : 'hls')
          })
        })
        if (res.liveStatus == 1) {
          _self.video.live = true
        } else {
          _self.video.live = false
        }
        _self.video.danmaku = true
        _self.video.quality = qualityArr
        _self.video.pic = (res.liveCenterImg != undefined ? res.liveCenterImg : 'https://www.baidu.com/img/pcpad_e247c0f9a461b6394da20e308588818f.png')
        _self.renderPlayerFlag = true
        this.$nextTick(function () {
          this.player = this.$refs.player.dp
        })
      },
    },
    computed: {}

  }
</script>

<style>
  .container {
    width: 90% !important;
  }

  @media screen and (max-width: 1000px) {
    .wrap-vid img {
      height: 230px;
    }

  }

  .wrap .box {
    position: relative;
    width: 100%;
    height: 90%;
  }

  .wrap .box span {
    position: absolute;
    top: 10px;
    left: 20px;
    display: block;
    padding: 10px;
    color: #336688
  }

  .wrap .send .send-btn:hover {
    background-color: #4cacdc
  }


</style>
